<template>
  <div class="navtob">
    <div class="daleft">
      <ul class="left">
        <li class="logoer" border="0" style="cursor: pointer" @click="mos">
          <div class="img">
            <img src="../assets/fhs.png" alt="" />
          </div>
        </li>
      </ul>
      <div>
        <ul class="gong">
          <li class="sjianA" border="0" style="cursor: pointer">
            <div class="img">
              <img src="../assets/fhs.png" alt="" />
            </div>
          </li>
          <li class="sjianb" border="0" style="cursor: pointer">
            <div class="img">
              <img src="../assets/fhs.png" alt="" />
            </div>
          </li>
          <li>
            <div class="ssk" border="0" style="cursor: pointer">
              <el-input
                @focus="huod"
                @blur="sq"
                size="mini"
                placeholder="请输入内容"
                prefix-icon="el-icon-search"
                v-model="input2"
              >
              </el-input>
            </div>
          </li>
          <li border="0" style="cursor: pointer">
            <div class="maikf">
              <img src="../assets/mkf.png" alt="" />
            </div>
          </li>
        </ul>
        <el-collapse-transition>
          <div class="tiani" v-show="show3">
            <ul>
              <li
                v-for="(item, index) in tuajian"
                :key="index"
                border="0"
                style="cursor: pointer"
              >
                <span>
                  {{ item }}
                </span>
              </li>
            </ul>
          </div>
        </el-collapse-transition>
      </div>
    </div>
    <div class="daright">
      <ul class="right" border="0" style="cursor: pointer">
        <li class="zhuti">
          <img src="../assets/saz.png" alt="" />
        </li>
        <li class="zhuti" border="0" style="cursor: pointer">
          <img src="../assets/yf.png" alt="" />
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      input2: "",
      tuajian: ["毛不易", "张杰", "周杰伦", "五月天", "韩红", "王俊凯"],
      show3: false,
    };
  },
  methods: {
    mos() {
      this.$emit("getTreeData", false);
    },
    huod() {
      this.show3 = true;
    },
    sq() {
      this.show3 = false;
    },
  },
};
</script>

<style lang="less" scoped>
.tiani {
  position: absolute;
  z-index: 99;
  // border: 2px solid rgba(139, 139, 139, 0.575);
  // left: -10px;
  width: 300px;
  // height: 500px;
  background-color: rgba(206, 206, 206, 0.815);
  border-radius: 5px;
  // border-right: 2px solid rgba(179, 175, 175, 0.705);
  //   border-bottom: 2px solid rgba(179, 175, 175, 0.705);
  //      border-left: 2px solid rgba(179, 175, 175, 0.705);
  box-shadow: 4px 4px 15px rgba(87, 85, 85, 0.623);
  li {
    // margin-left: 10px;
    margin-bottom: 5px;
    font-size: 17px;
    height: 50px;
    line-height: 50px;
    span {
      margin-left: 15px;
      color: rgb(228, 104, 155);
    }
    &:hover {
      background-color: rgba(209, 209, 209, 0.637);
    }
  }
}
.navtob {
  height: 100%;
  display: flex;
  justify-content: space-between;
  .daleft {
    display: flex;
    height: 100%;
    align-items: center;
    .left {
      height: 100%;
      margin-right: 20px;

      .logo {
        width: 180px;
        height: 100%;
        // border: 1px solid #000;
        display: flex;
        align-items: center;
        .img {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 30px;
          height: 30px;
          background-color: rgb(255, 255, 255);
          border-radius: 50%;
          img {
            width: 100%;
            height: 100%;
          }
          margin-right: 5px;
        }
        span {
          font-size: 18px;
          font-weight: 550;
          color: rgb(248, 248, 248);
        }
      }
      .logoer {
        width: 180px;
        height: 100%;
        // border: 1px solid #000;
        display: flex;
        align-items: center;
        .img {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 20px;
          height: 20px;
          // background-color: rgb(255, 255, 255);
          border-radius: 50%;
          img {
            transform: rotate(-90deg);
            width: 100%;
            height: 100%;
          }
          margin-right: 5px;
        }
      }
    }
    .gong {
      width: 250px;
      height: 100%;
      li {
        margin-right: 10px;
      }
      //   border: 1px solid #000;
      display: flex;
      align-items: center;
      .sjianA {
        //   margin-right: 20px;
        .img {
          width: 30px;
          height: 30px;
          //   border: 1px solid #000;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 50%;
          background-color: #ffffff4b;
          img {
            width: 50%;
            height: 50%;
            margin-right: 2px;
          }
        }
      }
      .sjianb {
        transform: rotate(180deg);
        .img {
          width: 30px;
          height: 30px;
          //   border: 1px solid #000;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 50%;
          background-color: #ffffff4b;
          img {
            width: 50%;
            height: 50%;
            margin-right: 2px;
          }
        }
      }
      .ssk {
        width: 200px;
        display: flex;
        align-items: center;
        height: 30px;
        //   border: 1px solid #000;
        border-radius: 50px;
        overflow: hidden;
        background-color: #ffffff4b;
        /deep/ .el-input__inner {
          height: 47px;
          background-color: #ffffff4b;
          color: #000;
          border: none;
          // color: #000!important;
        }
      }
      .maikf {
        width: 30px;
        height: 30px;
        //  background-color: #ffffff4b;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        img {
          width: 70%;
          height: 70%;
        }
      }
    }
  }
  .daright {
    width: 250px;
    // border: 1px solid #000;
    li {
      margin-right: 10px;
    }

    .right {
      display: flex;
      flex-direction: row-reverse;
      align-items: center;
      height: 100%;
      .yhun {
        width: 100px;
        display: flex;
        align-items: center;
        // margin-right: 20px;
        .txiang {
          height: 30px;
          width: 30px;
          border-radius: 50%;
          display: flex;
          align-items: center;

          // border: 1px solid #000;
          img {
            width: 100%;
            height: 100%;
          }
          margin-right: 5px;
        }
        span {
          margin-top: 3px;
          color: rgb(241, 240, 240);
          font-weight: 550;
        }
      }
      .zhuti {
        width: 20px;
        height: 20px;
        display: flex;
        align-items: center;
        margin-right: 20px;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
</style>


